<template>
	<view class="portrait">
		<uni-table ref="table" border stripe emptyText="暂无数据" style="margin-top: 20px;">
			<uni-tr class="head">
				<uni-th width="100" align="center">区域</uni-th>
				<uni-th width="100" align="center">鸡场名录</uni-th>
				<uni-th width="200" align="center">品种日龄</uni-th>
				<uni-th width="200" align="center">供应量</uni-th>
				<uni-th width="200" align="center">规格报价</uni-th>
				<uni-th width="200" align="center">涨跌标识</uni-th>
				<uni-th width="100" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item,index) in tableData" :key="index">
				<uni-th align="center" width="100">{{ item.adress }}</uni-th>
				<uni-th align="center" width="100">{{ item.title }}</uni-th>
				<uni-th align="center" width="100">{{ item.day }}</uni-th>
				<uni-th align="center" width="100">{{ item.num }}</uni-th>
				<uni-th align="center" width="100">{{ item.money }}</uni-th>
				<uni-th align="center" width="100" style="color:red;">{{ item.state }}</uni-th>
				<uni-th align="center" width="100" style="color:rgb(54, 54, 250)">
					<text @click="getDetail(index)">查看详情</text>
				</uni-th>
			</uni-tr>
				
		</uni-table>
	</view>
</template>

<script>
	import list from '../index/data.json'
		export default {
			data() {
				return {
					tableData: list
				}
			},
			onLoad() {
	           
			},
			methods: {
	           getDetail (data) {
				    uni.navigateTo({
				   	   url: '/pages/details/index?id =' + data
				    })
			   },
			   lookMore () {
				   uni.navigateTo({
				      url: '/pages/portrait/index'
				   })
			   }
			}
		}
</script>

<style lang="less" scoped>
	.portrait {
	}
	.uni-table {
		table-layout: fixed;
		overflow: hidden;
		text-overflow: ellipsis; //省略号表示
		white-space: nowrap; //不换行
		.head {
			background-color: orange;
			.uni-table-th {
				color: #fff !important;
			}
		}
	
		.uni-table-td {
			table-layout: inherit;
			overflow: hidden;
			text-overflow: ellipsis; //省略号表示
			white-space: nowrap; //不换行
		}
	
		.uni-table-th {
			box-sizing: border-box;
			padding: 8rpx 5rpx;
			color: #333;
		}
	}
</style>